<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""DTD/xhtml1-strict.dtd">
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="/WEB-INF/c.tld" prefix="c"%>
<%@taglib uri="/WEB-INF/fmt.tld" prefix="fmt"%>
<%@taglib uri="/WEB-INF/el.tld" prefix="el"%>
<%@taglib uri="/WEB-INF/fn.tld" prefix="fn"%>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title></title>
		<c:import url="/includes/css_inc.jsp"/>
		<c:import url="/includes/js_inc.jsp"/>
		<script>
			$(function(){
				$("#add").button({
		            icons: {
		                primary: "ui-icon-plusthick"
		            }
		        }).click(function(){
		        	$("#listForm").submit();
		        });
				$("[name=addParent]").button({
		            icons: {
		                primary: "ui-icon-plusthick"
		            },
            		text: false
				});
				$("[name=deleteChild]").button({
		            icons: {
		                primary: "ui-icon-closethick"
		            },
            		text: false
				});

				$("#save").button({
		            icons: {
		                primary: "ui-icon-disk"
		            }
		        }).click(function(){
		        	$("#job").val("saveNagative");
		        	$("#listForm").submit();
		        });
			});
			function openDialog(categoryId, categoryLevel, categorySeq){
				$("#categoryId").val(categoryId);
				$("#categoryLevel").val(categoryLevel);
				$("#categorySeq").val(categorySeq);
				
				$( "#dialog" ).dialog({
					resizable: false,
					height:400,
					width:600,
			        modal: true,
			        buttons: {
						"บันทึก": function() {
							var inputElems = document.getElementsByName("childId");
							var count = 0;
							for (var i=0; i<inputElems.length; i++) {
							    if (inputElems[i].type === "checkbox" && inputElems[i].checked === true) {
							        count++;
							    }
							}
							if (count == 0){
								alert("กรุณาเลือกข้อมูล");
							} else {
								$("#dialogForm").submit();
							}
			            },
			            "ยกเลิก": function() {
			            	$( this ).dialog( "close" );
			        	}
			    	}
				});
			}
			function rollBack(categoryId, categorySeq){
				if(confirm('คุณต้องการลบข้อมูลหมวดการจ่าย?')==true){
					window.location='${pageContext.request.contextPath}/acc7?app=ACC70201&job=rollBack&categoryId='+categoryId+'&categorySeq='+categorySeq;
				}
			}
		</script>
	</head>
	<body>
		<c:set var="auth" value="${el:getMapValue(menuAuth, 'ACC70201')}"/>
		<div id="dialog" style="display: none;">
			<form class="acc67-form" name="dialogForm" id="dialogForm" action="${pageContext.request.contextPath}/acc7" method="post">
				<input type="hidden" name="app" id="app" value="ACC70201"/>
				<input type="hidden" name="job" id="jobDialog" value="saveParent"/>
				<input type="hidden" name="categoryId" id="categoryId" value=""/>
				<input type="hidden" name="categoryLevel" id="categoryLevel" value=""/>
				<input type="hidden" name="categorySeq" id="categorySeq" value=""/>
				<c:if test="${!empty expenseCategoryBean}">
					<table width="100%" class="ui-widget ui-widget-content">
						<tr>
							<th align="center" class="ui-state-default" width="5%">เลือก</th>
							<th align="center" class="ui-state-default">ชื่อหมวดการจ่าย</th>
						</tr>
						<c:forEach var="data" items="${expenseCategoryBean}" varStatus="x">
							<tr class="grid-tr-${x.count % 2}">
								<td align="center"><input type="checkbox" name="childId" value="${data.categoryId}"></td>
								<td align="left">${data.categoryName}</td>
							</tr>
						</c:forEach>
					</table>
				</c:if>
			</form>
		</div>
		<c:import url="/apps/msg.jsp"/>
		<form class="acc67-form" name="listForm" id="listForm" action="${pageContext.request.contextPath}/acc7" method="post">
		<input type="hidden" name="app" id="app" value="ACC70201"/>
		<input type="hidden" name="job" id="job" value="${job}"/>
		<table width="100%" class="ui-widget ui-widget-content" border="0">
			<tr>
				<th align="left" class="acc67-header ui-widget-header" colspan="2"><b>${screenCode.ACC70201}</b></th>
			</tr>
			<tr>
				<td align="right">
					<c:if test="${fn:contains(auth, 'I')}">
						<button type="button" name="add" id="add">เพิ่มข้อมูล</button>
					</c:if>
				</td>
			</tr>
			<tr>
				<td>
					<fieldset>
						<legend> จัดการข้อมูลหมวดการจ่าย </legend>
						<table width="100%" class="acc67-grid ui-widget ui-widget-content" border="0">
							<tr>
								<th align="center" class="ui-state-default" width=5%">ใช้งาน</th>
								<th align="center" class="ui-state-default">ชื่อหมวดการจ่าย</th>
								<th align="center" class="ui-state-default" width=5%">เพิ่ม</th>
								<th align="center" class="ui-state-default" width="5%">ลบ</th>
							</tr>
							<tr class="grid-tr-0">
								<td></td>
								<td>
									หมวดการจ่าย
								</td>
								<td>
									<c:if test="${fn:contains(auth, 'U')}">
										<button type="button" name="addParent" class="acc67-button" onclick="openDialog('0','0')"></button>
									</c:if>
								</td>
								<td></td>
							</tr>
							<c:if test="${!empty expenseCategoryBeanList}">
							<c:forEach items="${expenseCategoryBeanList}" var="listData" varStatus="x">
								<tr class="grid-tr-${x.count % 2}">
									<td align="center">
										<c:if var="checked" test="${listData.categoryApply == 'Y'}"/>
										<input type="checkbox"  name="apply" id="apply" ${checked ? 'checked' : ''} value="${listData.categoryId}">
									</td>
									<c:if test="${listData.categoryLevel == '1'}">
										<td align="canter">${listData.categoryName}</td>
									</c:if>
									<c:if test="${listData.categoryLevel != '1' && listData.categoryLevel != '0'}">
										<td align="canter">
											<c:forEach begin="1" end="${listData.categoryLevel}" step="1">
												&nbsp;&nbsp;
											</c:forEach>
												${listData.categoryName}
										</td>
									</c:if>	
									<td>	
									<c:if test="${listData.categoryLevel < '2'}">
										<c:if test="${fn:contains(auth, 'U')}">
											<button type="button" name="addParent" class="acc67-button" onclick="openDialog('${listData.categoryId}','${listData.categoryLevel}','${listData.categorySeq}')"></button>
										</c:if>
									</c:if>	
									<c:if test="${listData.categoryLevel > '2'}">
										&nbsp;
									</c:if>	
									</td>
									<td>
										<c:if test="${fn:contains(auth, 'D')}">
											<button type="button" name="deleteChild" class="acc67-button" onclick="rollBack('${listData.categoryId}','${listData.categorySeq}')"></button>
										</c:if>
									</td>
								</tr>
							</c:forEach>
							</c:if>
						</table>	
					</fieldset>	
				<td>
			</tr>
			
			<tr>
				<td align="center">
					<c:if test="${fn:contains(auth, 'U')}">
						<button type="button" name="save" id="save" class="acc67-button">บันทึก</button>
					</c:if>
				</td>
			</tr>
		</table>
		</form>
	</body>
</html>